<template>
  <div>
    <el-form>
      <div class="id_top_22">
        <p><span>实名认证</span></p>
      </div>
      <div class="id_title_one">
        <!-- 1. 开始时true -->
        <div class="id_content">
          <div>
            <div v-if="id_title">
              <div class="btn_div_1">
                <el-input
                  class="input_name"
                  v-model="name"
                  placeholder="本人姓名"
                ></el-input>
              </div>
              <div class="btn_div_2">
                <el-input
                  v-model="idcard"
                  placeholder="本人身份证号"
                ></el-input>
              </div>
              <div class="btn_div_3">
                <el-button
                  class="nextBtn"
                  type="danger"
                  style="margin-top: 12px"
                  @click="next"
                  >添加</el-button
                >
              </div>
            </div>

            <!-- 开始时false 然后点击返回 -->
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { lang } from "moment";
export default {
  data() {
    return {
      checked: false,
      show: true,
      timer: 0,
      count: 0,
      ppt: true, //点击时改变样式
      active: 0,
      id_title: true,
      id_title_two: false,
      id_title_three: false,

      form: {
        // 银行卡号
        user_bank_card: "",
        // 用户密码
        user_pwd: "",
        // 用户确认密码
        user_pwd_two: "",
        // 用户手机号
        user_phone: "",
        // 短信验证码
        verification_code: "",
      },
      // 接后台实体
      userBean: {},
      // 姓名
      name: "",
      // 身份证
      idcard: "",
    };
  },

  // 初始化加载用户信息
  created() {
    this.initialize();
  },

  methods: {
    // 回显加载用户信息
    initialize() {
      axios({
        url: "/api/user/findUserByPhone",
      }).then((res) => {
        console.log(res.data.data);
        console.log("----------------------------");
        this.userBean = res.data.data;
        console.log(this.userBean);
      });
    },

    // 第一次点击
    next() {
      if (this.name == "" || this.name == null) {
        this.$message({
          showClose: true,
          message: "请输入正确姓名",
          type: "error",
        });
      } else {
        if (this.idcard == "" || this.idcard.length < 18) {
          this.$message({
            showClose: true,
            message: "请输入正确银行卡",
            type: "error",
          });
        } else {
          axios({
            url: "api/IdNumberVerification",
            method: "post",
            params: {
              name: this.name,
              idcard: this.idcard,
            },
          }).then((res) => {
            if (res.data.message == "实名认证成功！！！") {
              this.$router.push({ path: "SecuritySetting7" });
            } else {
              this.$message({
                type: "warning",
                message: res.data.message,
              });
              return;
            }
          });
        }
      }
    },
  },
};
</script>

<style>
.input_name {
  float: left;
  margin-left: 70px;
}
.btn_div_1 {
  margin-top: 43px;
  margin-left: 17px;
  width: 60%;
  float: left;
  /* background-color: #dcdfe6; */
}
.btn_div_2 {
  float: left;
  margin-top: 25px;
  margin-left: 86px;
  width: 60%;
  /* background-color: #dcdfe6; */
}
.btn_div_3 {
  float: left;
  margin-top: 15px;
  margin-left: 86px;
  width: 60%;
  /* background-color: #dcdfe6; */
}

.nextBtn {
  width: 100%;
}
.id_content {
  margin-top: 50px;
  width: 100%;
  height: 800px;
  /* margin: 0 auto; */
  float: left;
  /* background-color: aquamarine; */
}
.id_title_one {
  margin-top: 20px;
  width: 50%;
  height: 900px;
  margin: 0 auto;
  /* background-color: aqua; */
}
.id_top_22 {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-style: normal;
  font-weight: 700;
  margin-left: 30px;
  width: 93%;
  height: auto;
  border-bottom: 2.3px solid #efefef;
  line-height: 4;
  font-size: 18px;
}

.code_btn {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid red;
  background-color: red;
  -webkit-border-radius: 5px;
}
.code_btn1 {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid #cccccc;
  /* background-color: #cccccc; */
  -webkit-border-radius: 5px;
}
</style>